<!--
  ~ The MIT License (MIT)
  ~
  ~ Copyright (c) 2019 ‭‭‭‭‭‭‭‭‭‭‭‭[smallbun] www.smallbun.org
  ~
  ~ Permission is hereby granted, free of charge, to any person obtaining a copy of
  ~ this software and associated documentation files (the "Software"), to deal in
  ~ the Software without restriction, including without limitation the rights to
  ~ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  ~ the Software, and to permit persons to whom the Software is furnished to do so,
  ~ subject to the following conditions:
  ~
  ~ The above copyright notice and this permission notice shall be included in all
  ~ copies or substantial portions of the Software.
  ~
  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  ~ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  ~ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  ~ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  ~ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  -->

<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <head>
        <div th:include="fragments/include  :: header('添加')"></div>
        <!--放到header.html会和主页tab样式冲突-->
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.12.1/dist/bootstrap-table.min.css"/>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .content {
                min-height: 250px;
                margin-right: auto;
                margin-left: auto;
                padding: 10px;
                width: 100%;
                height: 100%;
                position: absolute; /*设置个absolute就可以全屏了*/
            }
        </style>
    </head>
</head>
<body class="list-body">
<section class="content">
    <div class="ibox" style="height:100%">
        <div class="ibox-title">
            <h5>表单设计</h5>
        </div>
        <div class="ibox-content">
            <form class="form-horizontal" th:action="@{/}" method="post">
                <div id="tab-1" class="tab-pane active">
                    <br>
                    <h4 class="page-header h4">基本信息</h4>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><font color="red">*</font>表名</label>
                                <div class="col-sm-8">
                                    <input id="name" name="name" class="form-control required" type="text"
                                           maxlength="50">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><font color="red">*</font>表说明</label>
                                <div class="col-sm-8">
                                    <input id="comments" name="comments" class="form-control required"
                                           type="text" maxlength="50">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><font color="red">*</font>实体类名</label>
                                <div class="col-sm-8">
                                    <input id="className" name="className" class="form-control required"
                                           type="text" maxlength="50">
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <h4 class="page-header h4">高级配置</h4>
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true"
                                                  style="color: #0b6cbc">数据表字段</a></li>
                            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false"
                                            style="color: #0b6cbc">页面及实体字段</a></li>
                            <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false"
                                            style="color: #0b6cbc">页面校验</a></li>
                            <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false"
                                            style="color: #0b6cbc">grid选择框（自定义java对象）</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab_1" class="tab-pane active">
                                <div class="panel-body">
                                    <table class="table  table-striped table-bordered" id="table"
                                           data-use-row-attr-func="true"
                                           data-reorderable-rows="true">
                                        <thead>
                                        <tr style="cursor: move;">
                                            <th style="text-align: center">序号</th>
                                            <th style="text-align: center">操作</th>
                                            <th title="数据库字段名" style="text-align: center">列名</th>
                                            <th title="默认读取数据库字段备注" style="text-align: center">说明</th>
                                            <th title="数据库中设置的字段类型及长度" style="text-align: center">物理类型</th>
                                            <th title="是否是数据库主键" style="text-align: center">主键</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!--模板-->
                                        <tr style="cursor: move;">
                                            <td style="text-align: center">
                                                <label>0</label>
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="columnList[0].name"
                                                       value="id">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                       name="columnList[0].comments"
                                                       value="主键" maxlength="200">
                                            </td>
                                            <td>
                                                <select class="form-control select2">
                                                    <option value="" selected="selected">varchar(64)</option>
                                                </select>
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                        </tr>
                                        <tr style="cursor: move;">
                                            <td style="text-align: center">
                                                <label>1</label>
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="columnList[0].name"
                                                       value="id">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                       name="columnList[0].comments"
                                                       value="主键" maxlength="200">
                                            </td>
                                            <td>
                                                <select class="form-control select2">
                                                    <option value="" selected="selected">varchar(64)</option>
                                                </select>
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="tab_2" class="tab-pane">
                                <div class="panel-body">
                                    <table id="contentTable2"
                                           class="table  table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th title="数据库字段名" style="text-align: center">列名</th>
                                            <th title="默认读取数据库字段备注" style="text-align: center">说明</th>
                                            <th title="实体对象的属性字段类型" style="text-align: center"> Java类型</th>
                                            <th title="实体对象的属性字段（对象名.属性名|属性名2|属性名3，例如：用户user.id|name|loginName，属性名2和属性名3为Join时关联查询的字段）">
                                                Java属性名称 <i class="icon-question-sign" style="text-align: center"></i>
                                            </th>
                                            <th title="选中后该字段被加入到查询列表里" style="text-align: center">表单</th>
                                            <th title="选中后该字段被加入到查询列表里" style="text-align: center">列表</th>
                                            <th title="选中后该字段被加入到查询条件里" style="text-align: center">查询</th>
                                            <th title="该字段为查询字段时的查询匹配放松" style="text-align: center">查询匹配方式</th>
                                            <th title="字段在表单中显示的类型" style="text-align: center">显示表单类型</th>
                                            <th title="显示表单类型设置为“下拉框、复选框、点选框”时，需设置字典的类型" style="text-align: center">
                                                字典类型
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control" readonly="readonly"
                                                       name="page-columnList[0].name" value="id">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                       name="page-columnList[0].comments" value="主键" maxlength="200"
                                                       readonly="readonly">
                                            </td>
                                            <td>
                                                <select name="columnList[0].javaType" class="form-control required m-b"
                                                        aria-required="true">
                                                    <!--基本类型-->
                                                    <option value="String" selected="" title="">String</option>
                                                    <option value="Long" title="">Long</option>
                                                    <option value="Integer" title="">Integer</option>
                                                    <option value="Double" title="">Double</option>
                                                    <option value="java.util.Date" title="">Date</option>
                                                    <!--对象-->
                                                    <option value="com.jeeplus.modules.sys.entity.User" title="">User
                                                    </option>
                                                    <option value="com.jeeplus.modules.sys.entity.Office" title="">
                                                        Office
                                                    </option>
                                                    <option value="com.jeeplus.modules.sys.entity.Area" title="">Area
                                                    </option>
                                                    <option value="This" title="生成当前对象">ThisObj</option>
                                                    <option value="com.jeeplus.modules.test.activiti.entity.TestExpense"
                                                            title="">数据库对象
                                                    </option>

                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].javaField" value="id"
                                                       maxlength="200" class="form-control required "
                                                       aria-required="true">
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td>
                                                <select name="columnList[0].queryType"
                                                        class="form-control required  m-b" aria-required="true">

                                                    <option value="=" title="">=</option>

                                                    <option value="!=" title="">!=</option>

                                                    <option value=">" title="">&gt;</option>

                                                    <option value=">=" title="">&gt;=</option>

                                                    <option value="<" title="">&lt;</option>

                                                    <option value="<=" title="">&lt;=</option>

                                                    <option value="between" title="">Between</option>

                                                    <option value="like" title="">Like</option>

                                                    <option value="left_like" title="">Left Like</option>

                                                    <option value="right_like" title="">Right Like</option>

                                                </select>
                                            </td>
                                            <td>
                                                <select name="columnList[0].showType" class="form-control required  m-b"
                                                        aria-required="true">

                                                    <option value="input" title="">单行文本</option>

                                                    <option value="textarea" title="">多行文本</option>

                                                    <option value="umeditor" title="">富文本编辑器</option>

                                                    <option value="select" title="">下拉选项</option>

                                                    <option value="radiobox" title="">单选按钮</option>

                                                    <option value="checkbox" title="">复选框</option>

                                                    <option value="dateselect" title="">日期选择</option>

                                                    <option value="userselect" title="">人员选择</option>

                                                    <option value="officeselect" title="">部门选择</option>

                                                    <option value="areaselect" title="">区域选择</option>

                                                    <option value="cityselect" title="">省市区三级联动</option>

                                                    <option value="treeselect" title="">树选择控件</option>

                                                    <option value="fileselect" title="">文件上传选择</option>

                                                    <option value="gridselect" title="">grid选择框</option>

                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].dictType" value=""
                                                       maxlength="200" class="form-control">
                                            </td>

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div id="tab_3" class="tab-pane">
                                <div class="panel-body">
                                    <table id="contentTable4"
                                           class="table  table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th title="数据库字段名" style="text-align: center">列名</th>
                                            <th title="默认读取数据库字段备注" style="text-align: center">说明</th>
                                            <th title="字段是否可为空值，不可为空字段自动进行空值验证">可空</th>
                                            <th title="校验类型" style="text-align: center">校验类型<i
                                                    class="icon-question-sign"></i></th>
                                            <th title="最小长度" style="text-align: center">最小长度</th>
                                            <th title="最大长度" style="text-align: center">最大长度</th>
                                            <th title="最小值" style="text-align: center">最小值</th>
                                            <th title="最大值" style="text-align: center">最大值</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control" readonly="readonly"
                                                       name="page-columnList[0].name" value="id">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                       name="page-columnList[0].comments" value="主键" maxlength="200"
                                                       readonly="readonly">
                                            </td>
                                            <td style="text-align: center">
                                                <input type="checkbox" name="r1" class="minimal">
                                            </td>
                                            <td>
                                                <select name="columnList[0].validateType" class="form-control m-b">

                                                    <option value="" title=""></option>

                                                    <option value="string" title="">字符串</option>

                                                    <option value="email" title="">电子邮件</option>

                                                    <option value="url" title="">网址</option>

                                                    <option value="date" title="">日期</option>

                                                    <option value="dateISO" title="">日期(ISO)</option>

                                                    <option value="creditcard" title="">信用卡号</option>

                                                    <option value="isMobile" title="">手机号码</option>

                                                    <option value="isPhone" title="">电话号码</option>

                                                    <option value="isTel" title="">手机/电话</option>

                                                    <option value="isQq" title="">QQ号码</option>

                                                    <option value="isIdCardNo" title="">身份证号码</option>

                                                    <option value="number" title="">数字</option>

                                                    <option value="digits" title="">整数</option>

                                                    <option value="isIntGtZero" title="">整数(大于0)</option>

                                                    <option value="isIntGteZero" title="">整数(大于等于0)</option>

                                                    <option value="isIntLtZero" title="">整数(小于0)</option>

                                                    <option value="isIntLteZero" title="">整数(小于等于0)</option>

                                                    <option value="isFloatGtZero" title="">浮点数(大于0)</option>

                                                    <option value="isFloatGteZero" title="">浮点数(大于等于0)</option>

                                                    <option value="isFloatLtZero" title="">浮点数(小于0)</option>

                                                    <option value="isFloatLteZero" title="">浮点数(小于等于0)</option>

                                                    <option value="isZipCode" title="">邮政编码</option>

                                                    <option value="isPwd" title="以字母开头，长度在6-12之间，只能包含字符、数字和下划线">密码
                                                    </option>

                                                    <option value="stringCheck" title="只能包含中文、英文、数字、下划线等字符">
                                                        中文/英文/数字/下划线
                                                    </option>

                                                    <option value="isEnglish" title="">英语</option>

                                                    <option value="isChinese" title="">汉子</option>

                                                    <option value="isChineseChar" title="匹配中文(包括汉字和字符)">汉英字符</option>

                                                    <option value="isRightfulString" title="判断是否为合法字符(a-zA-Z0-9-_)">
                                                        合法字符
                                                    </option>

                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].minLength" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].maxLength" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].minValue" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].maxValue" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="tab_4" class="tab-pane">
                                <div class="panel-body">
                                    <table id="contentTable3"
                                           class="table  table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th title="数据库字段名" width="15%">列名</th>
                                            <th title="默认读取数据库字段备注">说明</th>
                                            <th title="实体对象的属性字段说明">JAVA属性标签(例如：名字|年龄|备注)<i
                                                    class="icon-question-sign"></i></th>
                                            <th title="选中后该字段被加入到查询列表里">JAVA属性名称(例如：name|age|remarks)</th>
                                            <th title="选中后该字段被加入到查询列表里">检索标签(例如：名字|年龄)</th>
                                            <th title="选中后该字段被加入到查询条件里">检索key(例如：name|age)</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control" readonly="readonly"
                                                       name="page-columnList[0].name" value="id">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"
                                                       name="page-columnList[0].comments" value="主键" maxlength="200"
                                                       readonly="readonly">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].fieldLabels" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].fieldKeys" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].searchLabel" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                            <td>
                                                <input type="text" name="columnList[0].searchKey" value=""
                                                       maxlength="200" class="form-control  ">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <h4 class="page-header h4">父表配置</h4>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">父表表名</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2">
                                        <option value="" selected="selected">无</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">关联表外键</label>
                                <div class="col-sm-8">
                                    <select class="form-control select2">

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="col-sm-5"></div>
                        <div class="col-sm-2">
                            <button type="submit" class="btn btn-sm ibtn-info">保存</button>
                            <button type="submit" class="btn btn-sm ibtn-white">取消</button>
                        </div>
                        <div class="col-sm-5"></div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</section>
</body>
<div th:include="fragments/include :: include-js"></div>
<script th:src="@{/webjars/jquery-tablednd/0.9.1/jquery.tablednd.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/1.12.1/dist/bootstrap-table.min.js}"></script>
<script th:src="@{/webjars/bootstrap-table/1.12.1/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js}"></script>
<link th:href="@{/webjars/bootstrap-table/1.13.4/dist/bootstrap-table.min.css}"
      rel="stylesheet"/>
<link th:href="@{/webjars/bootstrap-table/1.12.1/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.css}"
      rel="stylesheet"/>

<script>
    var $table = $('#table');
    $(document).ready(function () {
        $('input[type="checkbox"].minimal, input[type="checkbox"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
        });
        $table.bootstrapTable({
            //当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据
            onReorderRowsDrag: function (table, row) {
                return false;
            },
            //拖拽完成后的这条数据，并且可以获取这行数据的上一行数据和下一行数据
            onReorderRowsDrop: function (table, row) {
                return false;
            },
            //当拖拽结束后，整个表格的数据
            onReorderRow: function (newData) {
                return false;
            }
        });
    });

</script>
</html>